<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="角色">
          <el-select v-model="formInline.role" placeholder="请选择角色">
            <el-option label="任意" value="renyi"></el-option>
            <el-option label="客服" value="kefu"></el-option>
            <el-option label="代理" value="daili"></el-option>
            <el-option label="管理员" value="guanliyuan"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.state" placeholder="请选择状态">
            <el-option label="活跃" value="renyi"></el-option>
            <el-option label="客服" value="kefu"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24" style="text-align: left">
      <el-button><router-link :to="{path:'/manage/articleinfo'}"> 添加文章</router-link></el-button>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>

        <el-table-column label="所属类别">
          <template slot-scope="scope">{{ scope.row.category|category }}</template>
        </el-table-column>

        <el-table-column label="被查看次数">
          <template slot-scope="scope">{{ scope.row.viewCount }}</template>
        </el-table-column> 

        <el-table-column label="状态" >
          <template slot-scope="scope">{{ scope.row.status|status }}</template>
        </el-table-column>  

        <el-table-column label="所属服务" >
          <template slot-scope="scope">{{ scope.row.storeId }}</template>
        </el-table-column>   

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >
              <router-link :to="{path:'articleInfo',query:{id:scope.row.id}}"> 编辑</router-link>
              </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination"> 
      </div>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.currentPage"
      :page-sizes="[10,20,30,40,50]"
      :page-size="pageInfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
    </el-col>
  </el-row>
</template>
<script> 
import store from '@/store' 
import { articleList} from '@/api/service'
import {fieldMap ,publicFilter} from '@/utils/showMap'
export default {
  data() {
    return {
      formInline: {
        role: "",
        state: "",
      }, 
      pageInfo:{
          currentPage: 1,
          size:20,
          total:0,
      },
      tableData: [],
      multipleSelection: [],
    };
  },
  filters: {
    status: value=>publicFilter(fieldMap.article_status,value.toString()),
    category: value=>publicFilter(fieldMap.article_category,value.toString())
  },
  mounted(){
    this.search();
    // console.log(fieldMap);
  },
  methods: {
    search(){
         articleList({page:this.pageInfo.currentPage,size:this.pageInfo.size}).then(res=>{  
          this.tableData=res.data.content;
          this.pageInfo.currentPage=res.data.page;
          this.pageInfo.total=res.data.total;
          this.pageInfo.size=res.data.size;
     })
    },
    onSubmit() {
      console.log("submit!");
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick(row) {
      // console.log(row);
    },
    
     handleSizeChange(val) {
       this.pageInfo.size=val;
      this.search();
      },
      handleCurrentChange(val) {
         this.pageInfo.currentPage=val;
        this.search();
      }
  },
};
</script>
<style lang="less" scoped>
.demo-form-inline {
  text-align: left;
}
.pagination{
  margin:15px auto;
}
</style>
